import echarts from 'echarts' 

export function drawChart(datas){
    // var option = {
    //     // title: {
    //     //     text: '净收入&利润',
    //     //     sublink: 'http://e.weibo.com/1341556070/AjwF2AgQm',
    //     //     textAlign: 'auto'
    //     // },
    //     color: ['#adcdea','#f6be98'],
    //     legend: {
    //         // orient: 'vertical',
    //         // top: 'middle',
    //         bottom: 0,
    //         left: 'center',
    //         data: ['净利润', '收入']
    //     },
    //     tooltip : {
    //         trigger: 'axis',
    //         axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    //             type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    //         },
    //         formatter: function (params) {
    //             var html = []
    //             for (var i=0; i<params.length; i++){
    //               var tem = ''
    //               if(i == 0){
    //                 tem += '<div>' + params[i].name + '</div>'
    //               }
    //               tem += '<div>'+params[i].marker + params[i].seriesName +' '+ Math.abs(params[i].value) + '</div>'
    //               html.push(tem)
    //             }
    //             return html.join('')
    //         },
    //     },
    //     grid: {
    //         top: 0,
    //         bottom: 40
    //     },
    //     xAxis: {
    //         type : 'value',
    //         position: 'bottom',
    //         axisLine: {show: false},
    //         axisLabel: {show: false},
    //         axisTick: {show: false},
    //         splitLine: {show: false},
    //     },
    //     yAxis: {
    //         type : 'category',
    //         axisLine: {
    //             show: true,
    //             lineStyle:{
    //                 color: '#f79646',
    //                 width: '1'
    //             }
    //         },
    //         axisLabel: {show: false},
    //         axisTick: {show: false},
    //         splitLine: {show: false},
    //         data : datas
    //     },
    //     series : [
    //         {
    //             name:'净利润',
    //             type:'bar',
    //             stack: '总量',
    //             barWidth:20,
    //             label: {
    //                 normal: {
    //                     show: false
    //                 }
    //             },
    //             data:[320, 302, 341, 374, 390, 450, 420]
    //         },
    //         {
    //             name:'收入',
    //             type:'bar',
    //             stack: '总量',
    //             label: {
    //                 normal: {
    //                     show: true,
    //                     color: '#545454',
    //                     position: 'insideRight',
    //                     formatter: function (params) {
    //                         // return  Math.abs(params.data)
    //                         console.log(params)
    //                         return  datas[params.dataIndex]
    //                     },
    //                 },
    //             },
                
    //             data:[-120, -132, -101, -134, -190, -230, -210]
    //         }
    //     ]
    // };
    var category = [];
    var leftCount = 0; //取左边最小值
    var rightCount = 0 //取右边最小值 如果不小于左边的12倍 把左边赋值给右边
    for (var i = 0; i < datas.length; i++) {
        category.push(datas[i].name);
        if(datas[i].profit < leftCount){
            leftCount = datas[i].profit
        }
        if(rightCount > datas[i].incomeYearGoal){
            rightCount = leftCount*12
        }
        if(rightCount > leftCount*12){
            rightCount = leftCount*12
        }
        if(rightCount > -1000){
            rightCount = -1000
        }
    }

    // option
    var option = {
        // backgroundColor: '#ffffff',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            bottom: 0,
            left:0,
            right:0,
            containLabel:true
        },
        legend: {
            right:0,
            data:[
                {name:'净利润年目标值'},
                {name:'净利润月目标值'},
                {name:'净利润'}, 
                '\n',  //legend强制换行
                {name:'收入年目标值'},
                {name:'收入月目标值'}, //legend强制换行
                {name:'收入'},
            ],
            textStyle: {
                color: '#8b8b8b'
            }
        },
        xAxis: [
            {
                data: category,
                axisLine: {
                    lineStyle: {
                        color: '#8b8b8b'
                    }
                }
            }
        ],
        yAxis: [
            {
                splitLine: {show: false},
                axisLine: {
                    lineStyle: {
                        color: '#8b8b8b'
                    }
                }
            },
            {
                splitLine: {show: false},
                axisLine: {
                    lineStyle: {
                        color: '#8b8b8b'
                    }
                },
                min: rightCount,
            }
        ],
        series: [{
            name: '净利润年目标值',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            itemStyle: {
                normal: {
                    color: '#ea9e9b'
                }
            },
            yAxisIndex: 1,
            symbolSize: 8,
            data: datas.map(item=>{
                return item.profitYearGoal
            })
        },
        {
            name: '收入年目标值',
            xAxisIndex: 1,
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            itemStyle: {
                normal: {
                    color: '#5e9df8'
                }
            },
            yAxisIndex: 1,
            data: datas.map(item=>{
                return item.incomeYearGoal
            })
        }, {
            name: '净利润',
            type: 'bar',
            symbol: 'rect',
            barGap:'150%',
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#e77c3b'},
                            {offset: 1, color: '#f4d06e'}
                        ]
                    )
                }
            },
            data:  datas.map(item=>{
                return item.profit
            })
        }, {
            name: '净利润月目标值',
            type: 'pictorialBar',
            symbol: 'rect',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#e77c3b'},
                            {offset: 1, color: '#f4d06e'}
                        ]
                    )
                }
            },
            symbolOffset: ['-152%', '-100%'],
            symbolRepeat: true,
            symbolSize: [8, 4],
            symbolMargin: 1,
            z: -10,
            data: datas.map(item=>{
                return item.profitMonthGoal
            })
        },
        {
            name: '收入',
            type: 'bar',
            symbol: 'rect',
            barWidth: 10,
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#5dc7d2'},
                            {offset: 1, color: '#77e7c9'}
                        ]
                    )
                }
            },
            data:  datas.map(item=>{
                return item.income
            })
        },{
            name: '收入月目标值',
            type: 'pictorialBar',
            symbol: 'rect',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#5dc7d2'},
                            {offset: 1, color: '#77e7c9'}
                        ]
                    )
                }
            },
            symbolOffset: ['152%', '-100%'],
            symbolRepeat: true,
            symbolSize: [8, 4],
            symbolMargin: 1,
            z: -10,
            data: datas.map(item=>{
                return item.incomeMonthGoal
            })
        }]
    };
    option.xAxis[1] = {
        type: 'value',
        max: option.xAxis[0].data.length * 100,
        show: false
    }
    option.series[0].data = option.series[0].data.map((x, i) => [35 + i * 100, x])
    option.series[1].data = option.series[1].data.map((x, i) => [65 + i * 100, x])
    return option;
}

export function drawBgChart(datas,title){
    var indicator = datas.map((item)=>{
        item.max = Number(item.maxValue)
        return  item
    })
    console.log(indicator)
    var option = {
    title: {
        text: title
    },
    tooltip: {},
    color:['#f2a163','#ac2217'],
    legend: {
        data: ['实际值', '目标值'],
        right:'0'
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#5a5a5a',
                // backgroundColor: '#999',
                // borderRadius: 3,
                padding: [3, 5]
           }
        },
        indicator: indicator,
        radius: '60%',//雷达图半径
        center:['50%','55%']//位置 因为不支持网格grid位置，所以拿这个调整位置
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        data : [
            {
                value : Array.apply(null,indicator).map((item,index)=>{
                    return  Number(item.reach)
                }),
                name : '实际值'
            },
             {
                value : Array.apply(null,indicator).map((item,index)=>{
                    return  Number(item.goal)
                }),
                name : '目标值'
            }
        ]
    }]
};
    return option;
}

export function line(arr,name){
    var name = name
    console.log(name)
    var data = Array.apply(null,arr).map(((item,index)=>{
        return Number(item.month) + '月'
    }))
    var value1 = Array.apply(null,arr).map(((item,index)=>{
        return item.reach
    }))
    var value2 = Array.apply(null,arr).map(((item,index)=>{
        return item.goal
    }))
    var option = {
        title: {
            //text: '平均入住率',
            text: '入住签署',
            textStyle:{
                fontSize: 14
            }
        },
        grid: {
            right: 0,
            bottom:0,
            left:0,
            containLabel: true
        },
        color: ['#adcdea','#f6be98'],
        legend: {
            left: 'right',
            data: [name, name + '目标值']
        },
        xAxis: {
            type: 'category',
            data: data,
            splitLine:{
                show: false,
                lineStyle:{
                    opacity:0
                }
            },
            axisLabel:{
                interval: 0,
                rotate:40
            },
            axisTick:{ //y轴刻度线
                show:false
            },
        },
        yAxis: {
            type: 'value',
            splitLine:{
                show: false,
                lineStyle:{
                    opacity:0
                }
            },
        },
        series: [{
            name:name,
            data: value1,
            type: 'line',
            smooth: true,
            // symbol: 'none',
        },{
            name:name + '目标值',
            data: value2,
            type: 'line',
            smooth: true,
            // symbol: 'none',
        }]
    };
    return option;
}